<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖曳</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: #F7F7F7;
            position: relative;
        }
        .box {
            width: 150px;
            height: 150px;
            background-color: yellow;
            position: absolute;
            top: 100px;
            left: 50px;
        }

        .container {
            width: 300px;
            height: 300px;
            background-color: green;
            position: absolute;
            top: 100px;
            left: 50%;
            margin-left: -150px;
        }
    </style>
</head>
<body>
<div class="box" draggable="true"></div>
<div class="container"></div>

<script>
    var box = document.querySelector('.box');
    var container = document.querySelector('.container');
    // 整个拖拽都会执行
    box.addEventListener('drag', function () {
        console.log(1);
    });
    box.addEventListener('dragleave', function () {
        console.log(2);
    });

    // 拖拽开始
    box.addEventListener('dragstart', function () {
        this.style.backgroundColor = 'pink';
        console.log(3)
    });

    // 拖拽结束
    box.addEventListener('dragend', function (ev) {
        this.style.backgroundColor = '';
        // console.log(ev);
    });

    // 进入到目标
    container.addEventListener('dragenter', function () {
        this.style.backgroundColor = 'pink';
    });

    // 在目标元素上移动
    container.addEventListener('dragover', function (ev) {
        this.style.backgroundColor = 'yellow';
        ev.preventDefault();
    });

    //
    container.addEventListener('drop', function (ev) {
        this.style.backgroundColor = 'black';
        console.log(ev);
        ev.preventDefault();
    });
</script>
</body>
</html>
